<template>
<div>
  <div class="block">
     <input v-model="keyword" type="text" class="inp" placeholder="请输入目的地">
  </div>
  <div v-show="keyword" class="search-inp" ref='search'>
    <ul>
      <li @click="itemClick(item.name)" class="item border-bottom" v-for="(item, index) of list" :key="index">{{item.name}}</li>
      <li class="item" v-show="list.length <= 0">无匹配项</li>
    </ul>
  </div>
</div>
</template>

<script>
import Bscroll from 'better-scroll'
import {mapMutations} from 'vuex'
export default {
  name: 'search',
  props: {
    ar: Object
  },
  data () {
    return {
      keyword: '',
      list: []
    }
  },
  methods: {
    itemClick (e) {
      this.changeCity(e)
      this.$router.push('/')
    },
    ...mapMutations(['changeCity'])
  },
  watch: {
    keyword () {
      console.log(this.keyword)
      if (!this.keyword) {
        this.list = []
        return
      }
      let arr = []
      for (let key in this.ar.cities) {
        this.ar.cities[key].forEach(item => {
          if (item.spell.includes(this.keyword) || item.name.includes(this.keyword)) {
            arr.push(item)
          }
        })
        this.list = arr
      }
    }
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.search)
  }
}
</script>

<style lang='stylus' scoped>
@import '~styles/varibles.styl'
.block
 background:$bgColor
 height :.72rem
 padding :0 .1rem
 .inp
  box-sizing :border-box
  width :100%
  height :.62rem
  padding :0 0.1rem
  line-height : .62rem
  text-align :center
  border-radius :.06rem
  color :#666
.search-inp
  z-index :1
  position :absolute
  background :#eee
  top:1.58rem
  left :0
  right :0
  bottom :0
  .item
   line-height :.62rem
   padding-left :.2rem
   color :#666
   background :#fff
</style>
